<template>
  <div>
    <div class="checkbox-wrapper" style="margin-bottom: 20px">
      <input
        id="terms-checkbox-37"
        name="checkbox"
        type="checkbox"
        v-model="isChecked"
        :disabled="true"
      />
      <label class="terms-label" for="terms-checkbox-37">
        <svg
          xmlns="http://www.w3.org/2000/svg"
          fill="none"
          viewBox="0 0 200 200"
          class="checkbox-svg"
        >
          <mask fill="white" id="path-1-inside-1_476_5-37">
            <rect height="200" width="200"></rect>
          </mask>
          <rect
            mask="url(#path-1-inside-1_476_5-37)"
            stroke-width="40"
            class="checkbox-box"
            height="200"
            width="200"
          ></rect>
          <path stroke-width="15" d="M52 111.018L76.9867 136L149 64" class="checkbox-tick"></path>
        </svg>
        <!--        <span class="label-text">Checkbox</span>-->
      </label>
    </div>

    <div class="card" @mouseup="qi" @mousedown="an">
      <div class="card-content">
        <div class="card-top">
          <span class="card-title">01.</span>
          <p>Lightning.</p>
        </div>
        <div class="card-bottom">
          <p>Hover Me?</p>
          <svg width="32" viewBox="0 -960 960 960" height="32" xmlns="http://www.w3.org/2000/svg">
            <path
              d="M226-160q-28 0-47-19t-19-47q0-28 19-47t47-19q28 0 47 19t19 47q0 28-19 47t-47 19Zm254 0q-28 0-47-19t-19-47q0-28 19-47t47-19q28 0 47 19t19 47q0 28-19 47t-47 19Zm254 0q-28 0-47-19t-19-47q0-28 19-47t47-19q28 0 47 19t19 47q0 28-19 47t-47 19ZM226-414q-28 0-47-19t-19-47q0-28 19-47t47-19q28 0 47 19t19 47q0 28-19 47t-47 19Zm254 0q-28 0-47-19t-19-47q0-28 19-47t47-19q28 0 47 19t19 47q0 28-19 47t-47 19Zm254 0q-28 0-47-19t-19-47q0-28 19-47t47-19q28 0 47 19t19 47q0 28-19 47t-47 19ZM226-668q-28 0-47-19t-19-47q0-28 19-47t47-19q28 0 47 19t19 47q0 28-19 47t-47 19Zm254 0q-28 0-47-19t-19-47q0-28 19-47t47-19q28 0 47 19t19 47q0 28-19 47t-47 19Zm254 0q-28 0-47-19t-19-47q0-28 19-47t47-19q28 0 47 19t19 47q0 28-19 47t-47 19Z"
            ></path>
          </svg>
        </div>
      </div>
      <div class="card-image">
        <svg width="48" viewBox="0 -960 960 960" height="48" xmlns="http://www.w3.org/2000/svg">
          <path
            d="m393-165 279-335H492l36-286-253 366h154l-36 255Zm-73 85 40-280H160l360-520h80l-40 320h240L400-80h-80Zm153-395Z"
          ></path>
        </svg>
      </div>
    </div>
  </div>
</template>
<script setup>
import { onMounted, ref } from 'vue'

// 设置默认值为 true，即复选框默认选中
const isChecked = ref(false)
const an = () => {
  isChecked.value = true
}
const qi = () => {
  isChecked.value = false
}
onMounted(() => {})
</script>
<style scoped>
.card {
  width: 320px;
  background: #fff480;
  color: black;
  position: relative;
  border-radius: 2.5em;
  padding: 2em;
  transition: transform 0.4s ease;
}

.card .card-content {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 5em;
  height: 100%;
  transition: transform 0.4s ease;
}

.card .card-top,
.card .card-bottom {
  display: flex;
  justify-content: space-between;
}

.card .card-top p,
.card .card-top .card-title,
.card .card-bottom p,
.card .card-bottom .card-title {
  margin: 0;
}

.card .card-title {
  font-weight: bold;
}

.card .card-top p,
.card .card-bottom p {
  font-weight: 600;
}

.card .card-bottom {
  align-items: flex-end;
}

.card .card-image {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  display: grid;
  place-items: center;
  pointer-events: none;
}

.card .card-image svg {
  width: 4em;
  height: 4em;
  transition: transform 0.4s ease;
}

.card:hover {
  cursor: pointer;
  transform: scale(0.97);
}

.card:hover .card-content {
  transform: scale(0.96);
}

.card:hover .card-image svg {
  transform: scale(1.05);
}

.card:active {
  transform: scale(0.9);
}

.checkbox-wrapper input[type='checkbox'] {
  display: none;
}

.checkbox-wrapper .terms-label {
  cursor: pointer;
  display: flex;
  align-items: center;
}

.checkbox-wrapper .terms-label .label-text {
  margin-left: 10px;
}

.checkbox-wrapper .checkbox-svg {
  width: 30px;
  height: 30px;
}

.checkbox-wrapper .checkbox-box {
  fill: rgba(207, 205, 205, 0.425);
  stroke: #8c00ff;
  stroke-dasharray: 800;
  stroke-dashoffset: 800;
  transition: stroke-dashoffset 0.6s ease-in;
}

.checkbox-wrapper .checkbox-tick {
  stroke: #8c00ff;
  stroke-dasharray: 172;
  stroke-dashoffset: 172;
  transition: stroke-dashoffset 0.6s ease-in;
}

.checkbox-wrapper input[type='checkbox']:checked + .terms-label .checkbox-box,
.checkbox-wrapper input[type='checkbox']:checked + .terms-label .checkbox-tick {
  stroke-dashoffset: 0;
}
</style>
